<template>
	<view class="app background">
		<AppNavbar :bgColor="'transparent'"></AppNavbar>
		<view class="login-content flex-center-center">
			<view class="login-content-flex flex-center-center">
				<Myform :data="state.formData" :rules="state.rules" ref="myFormRef"></Myform>
				<button class="form-button mybutton" @click="loginFun">Sign In</button>
				<!-- <button class="form-button mybutton" @click="goto('/pages/login/forgotPassword')">Register</button> -->
				<text class="Forgot  " @click="goto('/pages/register/register')">Register</text>
				<text class="Forgot ml-4" @click="goto('/pages/login/forgotPassword')">Forgot Password?</text>

			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		loginApi
	} from '@/api/account.js'
	import Myform from '@/components/Myform/Myform.vue'
	const myFormRef = ref(null)
	const {
		proxy
	} = getCurrentInstance()
	const state = reactive({
		formData: [{
				prop: 'userEmail',
				label: 'E-Mail',
				value: '',
				line: true
			},
			{
				prop: 'userPaw',
				label: 'Password',
				value: '',
				type: 'private',
				line: true
			}
		],
		rules: {

			userEmail: 'email',
			userPaw: 'password',

		}

	})

	//登录
	const loginFun = async () => {
		console.log("进来了");
		const data = await myFormRef.value.verify()
		if (!data) {
			return
		}
		data.loginType = 2
		const res = await loginApi(data)
		if (res.code === 200) {
			uni.tools.showTips('login success')
			proxy.$store.commit('userStore/setUserStore', res.data)
			goto('/pages/MyPet/MyPet')
		} else {

			uni.tools.showTips(res.msg)
		}
	}
	const goto = (ulr) => {
		uni.$to(ulr)
	}
</script>

<style lang="scss" scoped>
	.app {
		.login-content {
			width: 100%;
			position: fixed;
			bottom: 50rpx;

			.login-content-flex {
				width: 95%;
				color: #fff;

				.Forgot {
					text-decoration: underline;
				}

				.mybutton {
					background: $uni-bg-linear;
					color: $uni-bg-color;
					margin: 45rpx 0;
				}
			}
		}

		::v-deep .u-form-item__body__right__message {
			margin-left: 15px !important;
		}
	}
</style>